  
  <style type="text/css">
  	  /* 这里需要for循环生成样式属性 */
	  .ph{
		  border-bottom: black 1px solid;
	  }
  	{% for p in pd.page.items %}
   	.page{{p.pid}}{
   			width: 600px;
   		}
   		.first{{p.pid}}{
   			
   			border-bottom: orangered 4px solid;
   			
   		}
   		.second{{p.pid}}{
   			border-bottom: none;
   			
   		}
   		.third{{p.pid}}{
   			border-bottom: none;
   		}
  {% endfor %}
   </style>
   {% if 'msg' in pd.keys() %}
   <!-- 隐藏框里面放关于增删改查的信息--> 
         <input type='hidden' value="{{pd.msg[0]}}" id="showdownbox" />
   	   {% set res = pd.msg[0] %}
          {% endif %}
		  
      <input type='hidden' value="{{request.args.get('res','')}}" id="res_arg" /><!-- 如果删除成功后信息将显示在这里 -->
     <div class="dropshowdown">
         <span style="font-size:25px;font-family: 楷体;">{{res}}{{request.args.get('res','')}}</span>  <!-- 信息弹出框-->
     </div>

   
  <p align="left"> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">去新加</button>&nbsp;&nbsp;
  &nbsp;&nbsp;<button class="btn btn-primary" data-toggle="modal" data-target="#myModal_spider">去宠物网爬取数据</button></p>  
  <form method="post" action="/admin_pet?name={{name}}">
  <Label>宠物名:<input name="pname" value="{{ request.values.get('pname','')}}"></Label>
                    <Label>来源地:<input name="address" value="{{ request.values.get('address','')}}"></Label>
                    <Label>功能:<input name="ability" value="{{ request.values.get('ability','')}}"></Label>
                            <label>宠物类型:<select name="pclass">
                                <option value="">-请选择-</option>
                               {% for pclass in pclasslist %}
                                    <option value="{{ pclass.pclass }}" {% if request.values.get('pclass','')== pclass.pclass|string %} selected {% endif %}>{{pclass.pclass}}</option>
                               {% endfor %}
                            </select></label>
                            <input class="btn btn-primary" type="submit" value="查询" id="my_button">
						<input type="hidden" name="msg1" id="msg1" value="{{request.values.get('msg1','')}}">
					<i class="fas fa-search"></i>
<table width="100%" class="table table-bordered table-striped table-hover">
            <tr>
        <th>宠物编号</th><th>宠物图片</th><th>宠物名</th><th>宠物别名</th><th>来源地</th><th>功能</th><th>类别</th><th>宠物信息</th><th>宠物数值</th><th>操作</th>
            </tr>
            {% for p in pd.page.items %}
			
                <tr id="tr1">
                    <td>{{ p.pid }}</td>
                    <td style="width: 15%;"><img src="http://localhost:5001/displayimg{{p.pid}}" alt="没有提供图片" width="95%" id="tdimg"></td>
                    <td>{{ p.pname}}</td>
                    <td>{{ p.oname }}</td>
                    <td>{{ p.address}}</td>
					 <td>{{ p.ability}}</td>
                    <td>{{ p.pclass }}</td>
                    <td>
		<table>
			<tr><td>
			<div class="">
			   	<span class="first{{p.pid}} queryfont1{{p.pid}}" id='ltitle1{{p.pid}}'>宠物介绍</span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="second{{p.pid}} queryfont1{{p.pid}}" id='ltitle2{{p.pid}}'>历史</span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="third{{p.pid}} queryfont1{{p.pid}}" id='ltitle3{{p.pid}}'>适合人群</span>
				<p class="ph">
					<ul style="font-size: 16px;display: block;" class="page{{p.pid}}" id="page01{{p.pid}}">
							
					<p>{{p.pmsg}}<input type="hidden" value="{{p.pmsg}}"/></p>
							</ul>
				<ul style="font-size: 16px;display:none" class="page{{p.pid}}" id="page02{{p.pid}}">
			<p>{{p.pet_his}} <input type="hidden" value="{{p.pet_his}}"/></p>		
				</ul>
				<ul style="font-size: 16px;display: none;" class="page{{p.pid}}" id="page03{{p.pid}}">
			<p> {{p.pet_fit}} <input type="hidden" value="{{p.pet_fit}}"/></p>	
				</ul>      </div>
				        </div>
				     </div>
					 
			<script>
				 /* 这里的span换成 queryfont1*/
					let lis{{p.pid}}=document.querySelectorAll('.queryfont1{{p.pid}}');
							let page01{{p.pid}}=document.getElementById('page01{{p.pid}}');
							let page02{{p.pid}}=document.getElementById('page02{{p.pid}}');
							let page03{{p.pid}}=document.getElementById('page03{{p.pid}}');
							let ltitle1{{p.pid}}=document.getElementById('ltitle1{{p.pid}}');
							let ltitle2{{p.pid}}=document.getElementById('ltitle2{{p.pid}}');
							let ltitle3{{p.pid}}=document.getElementById('ltitle3{{p.pid}}');
							//console.log(lis{{p.pid}});
							for(let i=0;i<lis{{p.pid}}.length;i++){
								lis{{p.pid}}[i].onclick=function(event){
									if( event.target.classList.contains('first{{p.pid}}')){
										changePage{{p.pid}}()
										page01{{p.pid}}.style.display='block'
										ltitle1{{p.pid}}.style.borderBottom='orangered 4px solid'
										ltitle2{{p.pid}}.style.borderBottom='none'
										ltitle3{{p.pid}}.style.borderBottom='none'
									}else if( event.target.classList.contains('second{{p.pid}}')){
										changePage{{p.pid}}()
										page02{{p.pid}}.style.display='block'
										ltitle2{{p.pid}}.style.borderBottom='orangered 4px solid'
										ltitle1{{p.pid}}.style.borderBottom='none'
										ltitle3{{p.pid}}.style.borderBottom='none'
									}else{
										changePage{{p.pid}}()
										page03{{p.pid}}.style.display='block'
										ltitle3{{p.pid}}.style.borderBottom='orangered 4px solid'
										ltitle1{{p.pid}}.style.borderBottom='none'
										ltitle2{{p.pid}}.style.borderBottom='none'}}}
							function changePage{{p.pid}}(){
								document.querySelectorAll('.page{{p.pid}}').forEach(el=>{
								el.style.display='none'})}
			</script>		
			
			
			</td></tr>
				
		</table>				
			</td>
				<td style="width: 18%;" align="left">
			<table><!-- 宠物数值 -->
				<tr>
					<td><label for="">颜值:</label>{{p.bueaty}}分<input type="hidden" value="{{p.bueaty}}"/></td>
					<td><label for="">粘人度:</label>{{p.pet_clingy}}分<input type="hidden" value="{{p.pet_clingy}}"/></td>
				</tr>
				<tr>
					<td><label for="">友好度:</label>{{p.pet_kind}}分<input type="hidden" value="{{p.pet_kind}}"/></td>
					<td><label for="">智商:</label>{{p.pet_smart}}分<input type="hidden" value="{{p.pet_smart}}"/></td>
				</tr>
				<tr>
					<td><label for="">忠诚度:</label>{{p.pet_honest}}分<input type="hidden" value="{{p.pet_honest}}"/></td>
				</tr>
			</table>				
				</td>
					
					
                    <td style="width: 7%;">
                        <a href="pdel/{{p.pid}}/{{pd.page.page}}" onclick="return confirm('你确定删除吗？')">删除</a> 
                        <a href="#" class="edita" data-target="#myModal2" data-toggle="modal">编辑</a>
                    </td>
                </tr>
            {% endfor %}
        </table>
		
		
		
        <div style="text-align: center;">
            总记录条数:{{pd.page.total}} 每页显示记录数:{{ pd.page.per_page }} 总页数:<span id="allPage">{{pd.page.pages}}</span>
            <input class="btn btn-default" type="button" value="首页" onclick="toPage(1)" {% if pd.page.page == 1 %}disabled{%endif%}>
            <input class="btn btn-default" type="button" value="上一页" onclick="toPage({{pd.page.prev_num}})" {% if pd.page.page == 1 %}disabled{%endif%}>
            当前页:<input value="{{pd.page.page}}" size="3" name="currpage" onchange="toPage(this.value)">
            <input class="btn btn-default" type="button" value="下一页" onclick="toPage({{pd.page.next_num}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
            <input class="btn btn-default" type="button" value="末页" onclick="toPage({{pd.page.pages}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
            <script>
                function toPage(val){//val表示当前页
                    //获取总页数
                    allPage = document.getElementById("allPage").innerText
                    if(val>allPage)val = allPage
                    currpageObj = document.querySelector("input[name='currpage']")
                    currpageObj.value = val
                    document.forms[0].submit() //form表单提交
                }
				function onclickbtn(){   $("#my_button").click(function() {
					   	$("#msg1").val("点击了")				
				          });  }
						  
						function clear(){
							
							document.getElementById('msg1').value = ''
						}
					onclickbtn();	  
				setInterval('clear()',1000);
            </script>
        </div>
		
       </form>

         <!--新加模态框-->
     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                  <div class="modal-content">
                      <div class="modal-header">
						    <h4 class="modal-title" id="myModalLabel">宠物信息新加</h4>
						     <button class="close" data-dismiss="modal" aria-hidden="true">&times;关闭</button>
                        <!--  <h4 class="modal-title" id="myModalLabel">图书信息新加</h4> -->
                      </div>
                      <div class="modal-body">
                          <form class="form-horizontal" id="addform" role="form" method="post" action="/addpetmsg" enctype="multipart/form-data">
                              <div class="form-group">
                                  <label for="sid" class="col-sm-3 control-label">宠物编号</label>
                                  <div class="col-sm-9">
									  <input type="hidden"  value="{{pd.page.pages}}" name="lastpage"><!-- 这里是隐藏框里面存放页数值 --尾页 -->
                                       <input type="hidden"  value="{{pd.page.page}}" name="currentpage"><!-- 这里是隐藏框里面存放页数值 --尾页 -->
									  <input type="text" class="form-control" name="bid" id="bid" value="自动分配" readonly>
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label for="sname" class="col-sm-3 control-label">宠物名称</label>
                                  <div class="col-sm-9">
                                      <input type="text" class="form-control" name="pnameadd" id="bname" placeholder="宠物名称">
                                  </div>
                              </div>
                              <div class="form-group">
                                  <label class="col-sm-3 control-label">宠物别名</label>
                                  <div class="col-sm-9">
                                      <input type="text" class="form-control" name="onameadd" id="author" placeholder="宠物别名">
                                  </div>
                              </div>
  
                              <div class="form-group">
                                  <label class="col-sm-2 control-label">来源地</label>
                                  <div class="col-sm-10">
                                      <input type="text" class="form-control" name="addressadd" id="price" placeholder="来源地">
                                  </div>
                              </div>
  
                              <div class="form-group">
                                  <label class="col-sm-2 control-label">功能</label>
                                  <div class="col-sm-10">
                                      <input type="text" class="form-control" name="abilityadd" id="des" placeholder="功能">
                                  </div>
                              </div>
							  
							  <div class="form-group">
							      <label class="control-label">宠物介绍</label>
							      <div class="col-sm-12">
							          <textarea  type="text" class="form-control" name="petmsgadd" id="des" placeholder="宠物介绍"></textarea> 
							      </div>
							  </div>
							  
							  <div class="form-group">
							      <label class="control-label">历史</label>
							      <div class="col-sm-12">
							          <textarea  type="text" class="form-control" name="pet_hisadd" id="des" placeholder="历史"></textarea> 
							      </div>
							  </div>
							  
							  <div class="form-group">
							      <label class="control-label">适合人群</label>
							      <div class="col-sm-12">
							          <textarea  type="text" class="form-control" name="pet_fitadd" id="des" placeholder="适合人群"></textarea> 
							      </div>
							  </div>
							  
							  <div class="form-horizontal form-group" align="left">
								<span>颜值</span>
											 <input type="text" class="petinput" name="bueatyadd" id="des" placeholder="颜值" width="10%">分
											 &nbsp;&nbsp;&nbsp;&nbsp;
									<span>粘人度</span>
										 <input type="text" class="petinput" name="pet_clingyadd" id="des" placeholder="粘人度">分
							  </div>
							  
							  <div class="form-horizontal form-group" align="left">
							  	<span>友好度</span>
							  		<input type="text" class="petinput" name="pet_kindadd" id="des" placeholder="友好度" width="10%">分
							  			&nbsp;&nbsp;&nbsp;&nbsp;
					             <span>智商</span>
							  	    <input type="text" class="petinput" name="pet_smartadd" id="des" placeholder="智商">分
							  </div>
							  
							  <div class="form-horizontal form-group" align="left">
							  	<span>忠诚度</span>
							  		<input type="text" class="petinput" name="pet_honestadd" id="des" placeholder="忠诚度" width="10%">分
							  </div>
							  <!-- 添加宠物图片部分-->
							  <div class="form-group row" style="background-color: cornsilk;">
							  				     <div class="form-group">
							  				                     <div class="btn btn-default btn-file">
							  				                       <i class="fas fa-paperclip"></i> 添加宠物图片
							  				                       <input type="file" onchange="showImg(this)" name="petimg" id="petimg">
							  				                     </div>
							  				                     <p class="help-block">不超过:10MB</p>
							  				                   </div>
							  						   <div id="imgContainer" style="margin-top: 10px;"></div>
							    <div class="offset-sm-2 col-sm-10">
							  	<button type="button" class="btn btn-success" onclick="clearadd()">清除图片</button>
							    </div>
							  </div> <!-- 添加宠物图片结尾-->
                         
                              <div class="form-group">
                                  <label for="bsort" class="col-sm-2 control-label">类别</label>
                                  <div class="col-sm-10">
                                      <select name="pclassadd" id="bsort" class="form-control">
                                          <option value="">-请选择-</option>
                                          {% for pclass in pclasslist %}
                                              <option value="{{ pclass.pclass }}">{{pclass.pclass}}</option>
                                          {% endfor %}
                                      </select>
                                  </div>
                              </div>
                              <input type="submit" value="提交" id="addbut" style="display: none;">
                          </form>
                      </div>
                      <div class="modal-footer">
                          <button class="btn btn-default" data-dismiss="modal">关闭</button>
                          <button class="btn btn-primary" id="submitbut">提交</button>
                      </div>
                  </div>
              </div>
          </div>
            <!--新加模态框结束-->
        <script>
              $(function(){
                  $("#submitbut").click(function(){
                          $("#addbut").click()
                  });
              })
          </script>
	<script>
	//展示图像有关的
	var fileInput = document.getElementById('petimg');
	  function showImg(obj) {
	    var files = obj.files
	    document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
	  }
		 //获取图像元素
	  function getImgsByUrl(files) {
	    var elements = ''
	    for (var i = 0; i < files.length; i++) {
	      var url = window.URL.createObjectURL(files[i])
	      elements += "<img src='" + url + "' style='width: 50%;' class='addimg' id='addimg'/>"
	    }
	    return elements
	  }
		//清除添加的图片
					 function clearadd(){
						 var addimg = document.getElementsByClassName('addimg')
						 // var adddel= document.querySelector('#addimg')
						 // var imgContainer= document.querySelector('#imgContainer')
					       addimg.item(addimg).remove()
						  fileInput.value = null;  
					 }
	</script>
		  
	<!-- 修改模态框开始 -->
	<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
	            <div class="modal-dialog">
	                <div class="modal-content">
	                    <div class="modal-header">
							<h4 class="modal-title" id="myModalLabel2">宠物信息修改</h4>
	                        <button class="close" data-dismiss="modal" aria-hidden="true">&times;关闭</button>
	                    </div>
	                    <div class="modal-body">
	        <form class="form-horizontal" id="modform" role="form" method="post" action="/updatepet" enctype="multipart/form-data">
						<div class="form-group">
							<label for="sid" class="col-sm-3 control-label">宠物编号</label>
							<div class="col-sm-9">
								 <input type="hidden"  value="{{pd.page.page}}" name="current_page">
								<input type="text" class="form-control" name="pidu" id="pidu" value="{{request.values.get('pidu','0')}}" readonly>
							</div>
						</div>
						<div class="form-group">
							<label for="sname" class="col-sm-3 control-label">宠物名称</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" name="pnameu" id="pnameu" placeholder="宠物名称">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">宠物别名</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" name="onameu" id="onameu" placeholder="宠物别名">
							</div>
						</div>
						  
						<div class="form-group">
							<label class="col-sm-2 control-label">来源地</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="addressu" id="addressu" placeholder="来源地">
							</div>
						</div>
						  
						<div class="form-group">
							<label class="col-sm-2 control-label">功能</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" name="abilityu" id="abilityu" placeholder="功能">
							</div>
						</div>
						
						<div class="form-group">
							<label class="control-label">宠物介绍</label>
							<div class="col-sm-12">
								<textarea  type="text" class="form-control" name="petmsgu" id="petmsgu" placeholder="宠物介绍"></textarea> 
							</div>
						</div>
						
						<div class="form-group">
							<label class="control-label">历史</label>
							<div class="col-sm-12">
								<textarea  type="text" class="form-control" name="pet_hisu" id="pet_hisu" placeholder="历史"></textarea> 
							</div>
						</div>
						
						<div class="form-group">
							<label class="control-label">适合人群</label>
							<div class="col-sm-12">
								<textarea  type="text" class="form-control" name="pet_fitu" id="pet_fitu" placeholder="适合人群"></textarea> 
							</div>
						</div>
						
						<div class="form-horizontal form-group" align="left">
							<span>颜值</span>
										 <input type="text" class="petinput" name="bueatyu" id="bueatyu" placeholder="颜值" width="10%">分
										 &nbsp;&nbsp;&nbsp;&nbsp;
								<span>粘人度</span>
									 <input type="text" class="petinput" name="pet_clingyu" id="pet_clingyu" placeholder="粘人度">分
						</div>
						
						<div class="form-horizontal form-group" align="left">
							<span>友好度</span>
								<input type="text" class="petinput" name="pet_kindu" id="pet_kindu" placeholder="友好度" width="10%">分
									&nbsp;&nbsp;&nbsp;&nbsp;
						   <span>智商</span>
								<input type="text" class="petinput" name="pet_smartu" id="pet_smartu" placeholder="智商">分
						</div>
						
						<div class="form-horizontal form-group" align="left">
							<span>忠诚度</span>
								<input type="text" class="petinput" name="pet_honestu" id="pet_honestu" placeholder="忠诚度" width="10%">分
						</div>
						<!-- 添加宠物图片部分-->
						<div class="form-group row" style="background-color: cornsilk;">
							 <div class="form-group">
											 <div class="btn btn-default btn-file">
											   <i class="fas fa-paperclip"></i> 更换宠物图片
											   <input type="file" onchange="showImgu(this)" name="petimgu" id="petimgu">
											 </div> 
											 <p class="help-block">不超过:10MB</p>
											
										   </div>
										   
										   <div id="imgContaineru2" style="margin-top: 10px;" style="display:block">
										   <img src="" alt="没有相关图片" id="imgreplace">
										   </div>
										   
		                                   <div id="imgContaineru" style="margin-top: 10px;"><!-- 里面会显示图片 --></div>
										   
						 <div class="offset-sm-3 col-sm-9">
							  <span>若没有图片,默认使用原图</span>
							<button type="button" class="btn btn-success" onclick="clearupdate()">清除图片</button>
						  </div>
						</div> <!-- 添加宠物图片结尾-->
	                            
	                            <div class="form-group">
	                                <label for="bsort" class="col-sm-2 control-label">类别</label>
	                                <div class="col-sm-10">
	                                    <select name="pclassu" id="pclassu" class="form-control">
	                                        <option value="">-请选择-</option>
	                                        {% for pclass in pclasslist %}
	                                            <option value="{{ pclass.pclass }}">{{pclass.pclass}}</option>
	                                        {% endfor %}
	                                    </select>
	                                </div>
	                            </div>
	
	                            <input type="submit" value="提交" id="modbut" style="display: none;">
	        </form>
	                    </div>
	                    <div class="modal-footer">
	                        <button class="btn btn-default" data-dismiss="modal">关闭</button>
	                        <button class="btn btn-primary" id="submitbut2">提交</button>
	                    </div>
	                </div>
	            </div>
	        </div>
	        <script src="static/admin/js/update_show_msg.js"></script>   
		